<template>
  <view class="styleLifeServices">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="财务中心" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <image class="image1" src="../../static/image/lifeHall1.png" mode="" />
    <view class="tabList">
      <image class="image2" @click="gotoJump('/pageContent/life/lifestyle')" src="../../static/image/lifeHall2.png" mode="" />
      <image class="image2" @click="gotoWebview('http://m.39.net/')" src="../../static/image/lifeHall3.png" mode="" />
      <!-- <image class="image2" @click="gotoWebview('http://axh.dfr.cool/index.php/Home/Index/shfwb.html')" src="../../static/image/lifeHall4.png" mode="" /> -->
      <image class="image2" @click="gotoJump('/pageContent/life/garbage')" src="../../static/image/lifeHall4.png" mode="" />
      <image class="image2" @click="gotoWebview('https://m.baidu.com/sf?county=江西南昌&county_id=101240101&dspName=iphone&from_sf=1&openapi=1&pd=life_compare_weather&resource_id=5138&source=weather&title=天气地图&word=南昌&lid=11033868656862967864&referlid=11033868656862967864&ms=1&frsrcid=4982&frorder=1')" src="../../static/image/lifeHall5.png" mode="" />
      <image class="image2" @click="gotoWebview('https://map.baidu.com/search/%E5%8A%A0%E6%B2%B9%E7%AB%99/@12909322,3313902.999999999,17z?querytype=s&da_src=shareurl&wd=%E5%8A%A0%E6%B2%B9%E7%AB%99&c=163&src=0&pn=0&sug=0&l=17&b=(12907402,3312965.999999999;12911242,3314839.999999999)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&device_ratio=1')" src="../../static/image/lifeHall6.png" mode="" />
      <image class="image2" @click="gotoWebview('https://mbus.mapbar.com/nanchang')" src="../../static/image/lifeHall7.png" mode="" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {},
  methods: {
    gotoJump(url) {
      uni.navigateTo({
        url: url,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.styleLifeServices {
  background: #fff;
  min-height: 100vh;
  padding: 24rpx 32rpx;
  .image1 {
    width: 100%;
    height: 343rpx;
    margin-bottom: 22rpx;
  }
  .tabList {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .image2 {
      width: 332rpx;
      height: 160rpx;
      margin-bottom: 24rpx;
    }
  }
}
</style>
